<template>
  <div class="progress-bar-container"> <div class="progress-info">
      <span>批改进度: {{ value }}%</span>
    </div>
    <div class="progress-bar"> <div class="progress" :style="{ width: value + '%' }"></div> </div>
  </div>
</template>

<script setup>
defineProps({
  value: {
    type: Number,
    required: true,
    validator: (val) => val >= 0 && val <= 100
  }
});
</script>
<style scoped>
.progress-bar-container {
  width: 100%;
}

.progress-info {
  font-size: 0.875rem;
  color: #6c757d; /* var(--text-muted-color) */
  margin-bottom: 0.25rem;
  text-align: right;
}

.progress-track {
  height: 10px;
  background-color: #e9ecef; /* Lighter gray for track */
  border-radius: 0.25rem; /* var(--border-radius) */
  overflow: hidden;
  width: 100%;
}

.progress-fill {
  height: 100%;
  background-color: #007bff; /* var(--primary-color) */
  transition: width 0.3s ease-in-out;
  border-radius: 0.25rem; /* var(--border-radius) */
}
</style>
